<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { API_URLS } from '@/config/api'

const store = useStore()
let username = ref('')
let password = ref('')
const msg = ref('登录')
const userType = ref('user')
const router = useRouter()

const Login = async () => {
  await store.dispatch('saveUserType', userType.value)

  const apiUrl = userType.value === 'admin' ? API_URLS.adminLogin : API_URLS.employeeLogin
  try {
    const response = await fetch(apiUrl, {
      method: 'POST',
      credentials: 'include',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        username: username.value,
        password: password.value
      })
    })

    const data = await response.json
    if (response.ok) {
      // 登录成功，保存token或其他返回数据
      //await store.dispatch('saveUserInfo', data)
      console.log(data)
      console.log("login successfully")
      if (userType.value === 'admin') {
        router.push('/home/admin/employeeManage')
      } else {
        router.push('/home/employee/course')
      }
    } else {
      // 登录失败
      alert(data.message || '登录失败，请检查用户名和密码')
    }
  } catch (error) {
    console.error('登录请求出错：', error)
    alert('登录失败，请稍后重试')
  }
}

</script>

<template>
  <div class="login-container">
    <h1 class="login-title">{{ msg }}</h1>
    <div class="login-form">
      <form @submit.prevent="Login">
        <div class="form-item radio-group">
          <label>
            <input type="radio" v-model="userType" value="user">
            用户登录
          </label>
          <label>
            <input type="radio" v-model="userType" value="admin">
            管理员登录
          </label>
        </div>
        <div class="form-item">
          <input type="text" id="username" v-model="username" placeholder="用户名" required />
        </div>
        <div class="form-item">
          <input type="password" id="password" v-model="password" placeholder="密码" required>
        </div>
        <div class="form-item">
          <button type="submit" class="login-button">登录</button>
        </div>
      </form>
    </div>
  </div>
</template>

<style scoped>
.login-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #e0f7fa;
}

.login-title {
  color: #008080;
  margin-bottom: 1.5rem;
  font-size: 1.8rem;
}

.login-form {
  background-color: #ffffff;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
  border-left: 5px solid #008080;
}

.form-item {
  margin-bottom: 1rem;
}

.form-item input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 16px;
  color: #333;
  transition: all 0.3s;
  box-sizing: border-box;
}

.form-item input:focus {
  outline: none;
  border-color: #008080;
  box-shadow: 0 0 0 2px rgba(0, 128, 128, 0.2);
}

.login-button {
  width: 100%;
  padding: 12px 20px;
  background-color: #008080;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.login-button:hover {
  background-color: #20b2aa;
}

.login-button:active {
  background-color: #006666;
}

.radio-group {
  display: flex;
  justify-content: space-around;
  margin-bottom: 1.5rem;
}

.radio-group label {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #333;
}

.radio-group input[type="radio"] {
  margin-right: 8px;
  width: auto;
}
</style>
